<template>
    <div>
        <div v-if="!article">
            <div v-for="i in 5" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 100px">
                </el-skeleton>
            </div>
        </div>
        <div v-for="i in article" :key="i.id" class="title">
            <el-row style="height: 100px;">
                <div>
                    <el-image :src="i.face" class="img" :fit="contain">
                        <template #placeholder>
                            <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif"
                                :fit="contain" class="img" />
                        </template>
                    </el-image>
                </div>
                <div style="margin-top: 0px;width: 70%;margin-left: 10px;">
                    <router-link :to="{ name: 'article', query: { id: i.id } }" class="article">
                        {{ i.title }}</router-link>
                    <div class="time">
                        {{ i.time }}
                    </div>
                    <div class="intr" v-html="i.intr">

                    </div>
                </div>
            </el-row>
            <el-divider border-style="dashed" />
        </div>
        <pageComponents2Class @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length />
    </div>
</template>

<script>
import $ from 'jquery';
import { inject, ref, watch } from 'vue';
import pageComponents2Class from '../global/pageComponents2Class.vue';
export default {
    name: "tagMainArticleComponents",
    components: {
        pageComponents2Class,
    },
    props: {
        title: {
            type: String,
        },
    },
    setup(props) {
        let article = ref();
        let length = ref(10);
        let nowPage = ref(1);
        let nowSizes = ref(10);
        let address = inject('address');

        let filtersText = (val) => {
            if (val != null && val != '') {
                return val.replace(/<\/?[^>]*>|(\n|\t|\r)|(\s)/g, '')
            } else return '';
        };
        let getInfo = () => {
            if (props.title == "红色景点" && address.value.length >= 3) {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3001/address/getArticleByAddress/",
                    data: {
                        address: address.value,
                        page: nowPage.value,
                        sizes: nowSizes.value,
                    },
                    success(resp) {
                        article.value = resp.article;
                        length.value = resp.length;
                        for (let i = 0; i < article.value.length; i++) {
                            if (article.value[i].content != null) {
                                let intr = filtersText(article.value[i].content);
                                article.value[i].intr = intr;
                            } else article.value[i].intr = "";
                        }
                    }
                })
            } else {
                $.ajax({
                    type: "post",
                    url: "http://124.221.73.180:3001/articleGet/getArticleByTag/",
                    data: {
                        tag: props.title,
                        page: nowPage.value,
                        sizes: nowSizes.value,
                    },

                    success(resp) {


                        article.value = resp.article;
                        length.value = resp.length;
                        for (let i = 0; i < article.value.length; i++) {
                            if (article.value[i].content != null) {
                                let intr = filtersText(article.value[i].content);
                                article.value[i].intr = intr;
                            } else article.value[i].intr = "";
                        }
                    }
                })
            }
        }
        watch(address, () => {
            getInfo();
        })

        getInfo();
        let handlePageChange = (t) => {
            nowPage.value = t;
            console.log(t + "nowPage");
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }
        return {
            address,

            handlePageChange,
            handleSizesChange,

            article,
            length,
        }
    }
}

</script>

<style scoped>
.title {
    width: 96%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article {
    display: inline-block;
    width: 80%;
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 溢出部分隐藏 */
    text-overflow: ellipsis;
    /* 使用省略号表示被截断的文本 */
    text-decoration: none;
    color: black;
    font-size: larger;
    font-weight: 800;
}

.article:visited {
    text-decoration: none;
    color: black;
}

.article:hover {
    text-decoration: none;
    color: red;
}

.time {
    position: absolute;
    right: 2px;
    top: 2px;
    font-size: small;
    color: gray;
}

.img {
    width: 100px;
    height: 100px;
    border: 2px gray;
}


.intr {
    width: 600px;
    margin-left: 6px;
    font-size: 15px;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}


.el-divider--horizontal {
    margin: 24px 0;
}
</style>